<template>
  <div class="modal-wrapper" v-show="visible">
    <div class="modal-mask" @click="maskClose"></div>
    <transition name="slide">
      <div class="modal-main" ref="modalMain" v-show="mainVisible" :style="widthStyle">
        <div class="modal-header">
          <div class="modal-close" @click="close">
          </div>
          <div class="modal-title">
            {{title}}
          </div>
        </div>
        <div class="modal-content">
          <slot name="content">
          </slot>
        </div>
      </div>
    </transition>
  </div>

</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      maskClickToClose : {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '80%'
      }
    },
    computed: {
      widthStyle() {
        return {
          width: this.width
        }
      }
    },
    watch: {
      visible(newVis) {
        if (!newVis) {
          this.$emit("close")
          this._startScroll()
        }
        if (newVis) {
          this.mainVisible = true
          this._forbidScroll()
        }
      }
    },
    methods: {
      close() {
        this.mainVisible = false
        setTimeout(() => {
          this.$emit('update:visible', false)
        },400)
      },
      maskClose() {
        if (!this.maskClickToClose) {
          return
        }
        this.close()
      },
      _forbidScroll() {
        document.getElementsByTagName('body')[0].style.overflow = 'hidden'
      },
      _startScroll() {
        document.getElementsByTagName('body')[0].style.overflow = 'auto'
      }
    },
    data() {
      return {
        mainVisible: false
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .slide-enter-active, .slide-leave-active
    transition: all .4s;

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)

  .modal-mask
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    background rgba(55, 55, 55, 0.6)

  .modal-main
    position fixed
    background #fff
    top 0
    bottom 0
    right 0
    .modal-header
      position fixed
      width 100%
      display flex
      height 35px
      line-height 35px
      font-weight 700
      font-size 14px
      white-space nowrap
      border-bottom: 1px solid #e9eaec;
      .modal-close
        width 35px
        height 35px
        font-size 14px
        font-weight 100
        color #666
        line-height 35px
        text-align center
        cursor pointer
        &::before
          content: "\2716"
    .split
      position: fixed;
      width: 100%;
      height: 2px;
      margin-top: 35px;
      background: linear-gradient(transparent, transparent) border-box, repeating-linear-gradient(-45deg, #b8635e 0, #b8635e 8px, transparent 0, transparent 16px, #315baf 0, #315baf 24px, transparent 0, transparent 32px) !important;
    .modal-content
      padding 5px 60px
      margin-top 35px
      height 100%
      overflow auto
</style>
